<!DOCTYPE html>
<html>

<head>
    <title>个人页面</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userProfiles.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script>

        var userId = getParams().id; //当前页面id
        var currentPage = 1;//当前页
        var totalPage;//总页数
        var travelArr = [];//存放页面的容器
        var loading = false;//判定请求数据是否传完的标记
        var comments; //点评数
        var travels; //游记数


        function query() {
            if (loading) {//如果是加载状态就不发送请求
                return;
            }
            loading = true;//进入加载状态
            $.get(baseUrl + "users/" + userId + "/travels", {currentPage: currentPage}, function (data) {
                //每次查询都要把页面信息合并到容器中
                $.merge(travelArr, data.list);
                var json = {list: travelArr};
                $("#travels").renderValues(json, {
                    'getHref': getHref
                });
                //每查询一次当前页数加1
                currentPage++;
                //获取数据的总页数
                totalPage = data.pages;
                loading = false;//加载完成后把状态改成可以发送请求的状态
            });

        }


        $(function () {
            query();//查询被看用户的游记信息
            $(window).scroll(function () {
                //如果页面的滚动长度加窗口长度等于页面的总长度时 发送请求查询下一页数据
                if ($(document).scrollTop() + $(window).height() >= $(document).height() - 50) {//提前五十像素发送请求
                    //当前页小于总页数的时候才查询
                    if (currentPage <= totalPage) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoIcon: '../img/icon/loading.gif',
                            infoText: '不要拉了,再拉就出屎了!',
                            autoClose: 2500
                        });
                    }

                }
            })

            $.get(baseUrl + "users/" + userId, function (data) {
                if (data.success) {
                    $(".info").renderValues(data.data);
                    $(".bg").css('background-image', "url('" + data.data.coverImgUrl + "')");
                } else {
                    $(document).dialog({
                        type: 'confirm',
                        style: 'android',
                        titleText: '温馨提示:',
                        content: data.errorMsg,
                        buttons: [
                            {
                                name: '跳回主页',
                                callback: function () {
                                    window.location.href = "/index.html";
                                }
                            }
                        ]
                    });
                    //如果失败则跳回主页面
                }
            });


            //根据当前页面Id查询评价信息
            $("#comments-tab").click(function () {
                var currentPage = 1;
                var comments = []; //容器
                var page;
                function queryComments() {
                    flag = false; //加载状态
                    //发get请求,带上UserId查询
                    $.get(baseUrl+"/users/"+userId+"/strategyComments",{userId:userId,currentPage:currentPage},function (data) {
                        $.merge(comments,data.list); //放入到容器中
                        var json = {
                            list:comments
                        }
                        console.log(data);
                        $(".comment-link").renderValues(data.list[0],{
                            'getHref': getHref
                        })
                        $("#comments").renderValues(json,{
                            getStar: function (item,value) { //评分星星的拼接
                                var temp ="";
                                for (var i = 0; i < value; i++){
                                    temp += '<i class="fa fa-star"></i>';
                                }
                                for (var i = 0; i < 5 - value; i++){
                                    temp += '<i class="fa fa-star-o"></i>';
                                }
                                $(item).html(temp);
                            }
                        });
                        page=data.pages;
                    });
                    currentPage ++;
                }
                queryComments(); //查询评价页面

                $(window).scroll(function(){
                    if (($(document).scrollTop()+$(window).height()) >= $(document).height()-50){
                        if (currentPage <= page){
                            queryComments();
                        }
                    }

                });
            });


            //===============关注和粉丝相关===============
            //先获取当前用户的ID
            var json = JSON.parse(sessionStorage.getItem("user"));
            if (json) {
                var currentUserId = json['id'];

                //判断是否是自己的,是自己的就隐藏关注按钮和私信按钮
                if (currentUserId == userId) {
                    $("#followBtn").remove();
                    $("#letterBtn").remove();

                    $("#travels-tab").html("我的游记"+"["+travels+"]"); //设置我的游记按钮
                    $("#comments-tab").html("我的点评"+"["+comments+"]"); //设值我的点评按钮
                    $("#pills-contact-tab").html("我的旅行单"); //设置我的旅行单


                }else{
                    $("#letterBtn").click(function () {
                        window.location.href="/mine/chats.html?receiverId="+userId
                    });
                }
                //查询点评数量
                $.get(baseUrl+"users/"+userId+"/strategyComments/nums",{userId:userId,currentPage:currentPage},function (data) {
                    $("#comments-tab span").html(data);
                    comments = data;
                    if (currentUserId == userId) {
                        $("#comments-tab").html("我的点评" + "[" + comments + "]"); //设值我的点评按钮
                    }
                });
                //查询游记数量
                $.get(baseUrl+"users/"+userId+"/travels/nums",{userId:userId,currentPage:currentPage},function (data) {
                    $("#travels-tab span").html(data);
                    travels=data;
                    if (currentUserId == userId) {
                        $("#travels-tab").html("我的游记" + "[" + travels + "]"); //设置我的游记按钮
                    }
                });
                var state = false;
                $.get(baseUrl + 'users/' + userId + '/' +currentUserId , function (data) {
                    if (data.success) {
                        $("#followBtn").html("取消关注");
                        state = data.success;
                    }
                })
            }

            //查询关注数和粉丝数
            $.get(baseUrl + 'users/fans/' +userId,function (data) {
                $("#lookFans").html(data);
            })
            $.get(baseUrl + 'users/follows/' +userId,function (data) {
                $("#lookFollows").html(data);
            })

            //关注按钮
            $("#followBtn").click(function () {
                if (!json) {
                    alert("请先登录")
                    window.location.href = "/login.html";
                }
                if (!state) {
                    $.post(baseUrl + '/users/' + userId + '/' +currentUserId , {
                        userId: userId,
                        followId: currentUserId
                    }, function (data) {
                        if (data.success) {
                            $(document).dialog({
                                type: 'confirm',
                                titleText: '温馨提示',
                                content: '关注成功'
                            });
                        }
                        window.location.reload();
                    })
                } else {
                    $.ajax({
                        url: baseUrl + '/users/'+currentUserId,
                        data: {
                            'followId': currentUserId
                        },
                        method: 'delete',
                        success: function (data) {
                            $(document).dialog({
                                type: 'confirm',
                                titleText: '温馨提示',
                                content: '取消成功'
                            });
                            window.location.reload();
                        }
                    })

                }
            })


        })
    </script>
</head>
<body>
<div class="container bg" style="background-image: url('/img/user/bg.jpeg');">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name" render-html="nickName"></p>
            <p render-html="sign"></p>

            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <div>
                        <span id="lookFollows">0</span>
                    </div>
                    <div>
                        <span>关注</span>
                    </div>
                </div>
                <div class="col-2">
                    <div>
                        <span id="lookFans">0</span>
                    </div>
                    <div>
                        <span>粉丝</span>
                    </div>
                </div>
                <div class="col" id="functionBtn">
                    <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
                    <button class="btn btn-success ibtn" id="followBtn">关注</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记[<span>1</span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
                TA的点评[<span>1</span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
                TA的旅行单[<span>0</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">
            <dl class="list">
                <dd render-loop="list">
                    <a data-url="travelContent.html?id=" render-fun="getHref" render-key="list.id">
                        <img render-src="list.coverUrl">
                        <p><span class="title" render-html="list.title"></span>

                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>

        <div class="comment tab-pane fade " id="comments">

            <div render-loop="list">
                <div class="row">
                    <div class="col-2 comment-head">
                        <img class="rounded-circle" render-src="list.user.headImgUrl">
                    </div>
                    <div class="col">
                        <span class="comment-star" render-key="list.starNum" render-fun="getStar">
                        </span>

                        <span class="comment-date" render-html="list.createTime"></span>
                        <div class="comment-content">
                            <!-- 点评id-->
                            <a data-url="strategyComment.html?id=" render-fun="getHref" render-key="list.id">
                                <p render-html="list.content"></p>
                            </a>
                        </div>
                        <ul class="comment-img" render-loop="list.imgUrlsArr">
                            <li>
                                <img render-src="list.imgUrlsArr.self">
                            </li>
                        </ul>

                        <div class="comment-link">
                            <a data-url="strategyCatalogs.html?id=" render-fun="getHref" render-key="strategy.id">
                                <img render-src="list.strategy.coverUrl">
                                <span render-html="list.strategy.title"></span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <div class="tab-pane fade" id="pills-contact">.3333..</div>
    </div>
</div>


</body>
</html>